<nz-card [nzBordered]="false">
  <section class="search-section">
    <nz-select [(ngModel)]="agentId" [nzPlaceHolder]="'渠道商'" class="search-item" [nzAllowClear]="true" [nzShowSearch]="true">
      <nz-option
        *ngFor="let option of allAgent"
        [nzLabel]="option.name"
        [nzValue]="option.id">
      </nz-option>
    </nz-select>
    <button nz-button [nzType]="'primary'" nzGhost (click)="search()" class="search-item">
      <i class="anticon anticon-search"></i><span>搜索</span>
    </button>
  </section>
  <nz-table #nzTable [nzData]="page.content"
            [nzPageSize]="page.size"
            [nzTotal]="page.totalElements"
            [nzFrontPagination]="false"
            [(nzPageIndex)]="page.number"
            (nzPageIndexChange)="changePageNo($event)"
            [nzLoading]="isLoading">
    <thead>
    <tr>
      <th nz-th><span>序号</span></th>
      <th nz-th><span>充值单号</span></th>
      <th nz-th><span>申请渠道</span></th>
      <th nz-th><span>渠道手机</span></th>
      <th nz-th><span>凭证类别</span></th>
      <th nz-th><span>凭证信息</span></th>
      <th nz-th><span>申请充值金额(￥)</span></th>
      <th nz-th *ngIf="status == 2"><span>充值时间</span></th>
      <th nz-th *ngIf="status == 3"><span>拒绝原因</span></th>
      <th nz-th *ngIf="status == 1"><span>操作</span></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of nzTable.data;let i=index">
      <td>
        {{i+1}}
      </td>
      <td>{{data.rechargeNo}}</td>
      <td>{{data.agentId|dicsNamePipe:allAgent:"id":"name"}}</td>
      <td>{{data.agentId|dicsNamePipe:allAgent:"id":"phone"}}</td>
      <td>{{data.type|dicsNamePipe:typeOption}}</td>
      <td  *ngIf="data.type == 2">{{data.alipayNo}}</td>
      <td  *ngIf="data.type == 1" (click)="showPic(data.imgKey)" title="点击查看大图" style="cursor: pointer;"><img [src]="data.imgKey|qCloudDomain" style="max-height: 120px;max-width: 120px;" alt="加载出错"/></td>
      <td>{{data.amount}}</td>
      <td  *ngIf="status == 2">{{data.rechargeTime}}</td>
      <td  *ngIf="status == 3" [title]="data.remark">{{data.remark|stringEllipsisCutPipe:30}}</td>
      <td *ngIf="status == 1">
        <nz-popconfirm [nzTitle]="'确定要为该渠道充值吗？'" (nzOnConfirm)="agentRecharge(data)">
          <a nz-popconfirm>充值</a>
        </nz-popconfirm>
        <nz-divider nzType="vertical"></nz-divider>
        <nz-popconfirm [nzTitle]="'确定要驳回该渠道充值申请吗？'" (nzOnConfirm)="reject(data)">
          <a nz-popconfirm>驳回</a>
        </nz-popconfirm>
      </td>
    </tr>
    </tbody>
  </nz-table>
</nz-card>
<pic-viewer [picList]="picList" [picIdx]="0" [show]="isShowPic" (onClose)="onPicClose($event)"></pic-viewer>
